<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>
<!DOCTYPE html>
<html>
<head>
    <title>编辑投注记录</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.7.2/font/bootstrap-icons.css">
    <style>
        .form-label {
            font-weight: 500;
        }
        .btn {
            min-width: 100px;
        }
    </style>
</head>
<body>
    <div class="container mt-4">
        <div class="d-flex justify-content-between align-items-center mb-4">
            <h2>编辑投注记录</h2>
            <a href="/bet/list" class="btn btn-secondary">
                <i class="bi bi-arrow-left"></i> 返回列表
            </a>
        </div>
        <form action="/bet/edit" method="post" class="needs-validation" novalidate>
            <input type="hidden" name="id" value="${record.id}">
            
            <div class="mb-3">
                <label class="form-label">比赛时间</label>
                <input type="datetime-local" name="betTime" class="form-control" 
                       value="${record.betTimeStr}"
                       required>
            </div>
            
            <div class="mb-3">
                <label class="form-label">联赛名称</label>
                <input type="text" name="leagueName" class="form-control" 
                       value="${record.leagueName}" required>
            </div>
            
            <div class="mb-3">
                <label class="form-label">主队</label>
                <input type="text" name="homeTeam" class="form-control" 
                       value="${record.homeTeam}" required>
            </div>
            
            <div class="mb-3">
                <label class="form-label">客队</label>
                <input type="text" name="awayTeam" class="form-control" 
                       value="${record.awayTeam}" required>
            </div>
            
            <div class="mb-3">
                <label class="form-label">比赛类型</label>
                <select name="betType" class="form-select" required onchange="toggleHandicapTeam()">
                    <option value="">请选择</option>
                    <option value="让球" ${record.betType == '让球' ? 'selected' : ''}>让球</option>
                    <option value="大小球" ${record.betType == '大小球' ? 'selected' : ''}>大小球</option>
                </select>
            </div>
            
            <div class="mb-3" id="handicapTeamDiv" style="display: none;">
                <label class="form-label">让球方</label>
                <select name="handicapTeam" class="form-select">
                    <option value="">请选择</option>
                    <option value="主队" ${record.handicapTeam == '主队' ? 'selected' : ''}>主队</option>
                    <option value="客队" ${record.handicapTeam == '客队' ? 'selected' : ''}>客队</option>
                </select>
            </div>
            
            <div class="mb-3">
                <label class="form-label">盘口数值</label>
                <input type="text" name="handicapValue" class="form-control" 
                       value="${record.handicapValue}" required>
            </div>
            
            <div class="mb-3">
                <label class="form-label">水位</label>
                <input type="number" name="odds" class="form-control" step="0.01" 
                       value="${record.odds}" required>
            </div>
            
            <div class="mb-3">
                <label class="form-label">投注金额</label>
                <input type="number" name="betAmount" class="form-control" step="0.01" 
                       value="${record.betAmount}" required>
            </div>
            
            <div class="mb-3">
                <label class="form-label">比赛结果</label>
                <select name="betResult" class="form-select" onchange="calculateResult()">
                    <option value="">未结算</option>
                    <option value="WIN" ${record.betResult == 'WIN' ? 'selected' : ''}>赢</option>
                    <option value="HALF_WIN" ${record.betResult == 'HALF_WIN' ? 'selected' : ''}>赢一半</option>
                    <option value="DRAW" ${record.betResult == 'DRAW' ? 'selected' : ''}>和</option>
                    <option value="HALF_LOSE" ${record.betResult == 'HALF_LOSE' ? 'selected' : ''}>输一半</option>
                    <option value="LOSE" ${record.betResult == 'LOSE' ? 'selected' : ''}>输</option>
                </select>
            </div>
            
            <div class="mb-3">
                <label class="form-label">结果金额</label>
                <input type="number" name="resultAmount" class="form-control" step="0.01" 
                       value="${record.resultAmount}" readonly>
            </div>
            
            <div class="mb-3">
                <label class="form-label">备注</label>
                <textarea name="note" class="form-control" rows="3">${record.note}</textarea>
            </div>
            
            <div class="mt-4">
                <button type="submit" class="btn btn-primary">
                    <i class="bi bi-check-lg"></i> 保存
                </button>
                <button type="reset" class="btn btn-outline-secondary ms-2">
                    <i class="bi bi-arrow-counterclockwise"></i> 重置
                </button>
            </div>
        </form>
    </div>
    
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"></script>
    <script>
    function toggleHandicapTeam() {
        const betType = document.querySelector('select[name="betType"]').value;
        const handicapTeamDiv = document.getElementById('handicapTeamDiv');
        const handicapTeamSelect = document.querySelector('select[name="handicapTeam"]');
        
        if (betType === '让球') {
            handicapTeamDiv.style.display = 'block';
            handicapTeamSelect.required = true;
        } else {
            handicapTeamDiv.style.display = 'none';
            handicapTeamSelect.required = false;
            handicapTeamSelect.value = '';
        }
    }
    
    // 页面加载时执行一次
    document.addEventListener('DOMContentLoaded', function() {
        toggleHandicapTeam();
    });
    
    // 表单验证
    (function () {
        'use strict'
        var forms = document.querySelectorAll('.needs-validation')
        Array.prototype.slice.call(forms).forEach(function (form) {
            form.addEventListener('submit', function (event) {
                if (!form.checkValidity()) {
                    event.preventDefault()
                    event.stopPropagation()
                }
                form.classList.add('was-validated')
            }, false)
        })
    })()
    </script>
</body>
</html> 